<template>
    <!--标题-->
<div class="bg-img">
    <div class="top">
        <div class="left">
            <a href=""><img width="160" height="220" :src="movie.imgUrl" alt=""/></a>
            <div>
            <p style="font-size: 20px; font-weight: 600;">{{movie.movieName}}</p>

            <p>jiangjun</p>

            <p>动作,犯罪,剧情</p>

            <p>中国大陆,中国香港,/124分钟</p>

            <p>2016-09-30大陆上映</p>
            <button><img src="/img/banner_icon02.png" alt=""/>想看</button>
            <button><img src="/img/banner_icon01.png" alt=""/>评分</button>
            </div>
        </div>
        <!--右边-->
        <div class="right">
            <div>
            <ul>
                <li>
                    <p>用户评分</p>
                    <p>{{movie.mark}}</p>

                    <p>(55.6万人评分)</p>
                </li>
                </ul>
            <ul>
                <li>
                    <p>专业评分</p>
                    <p>6.4</p>

                    <p>(45万人评分)</p>
                </li>
            </ul>
            <ul>
                <li>
                    <p>累计票房</p>
                    <p class="txt-c">10.33 <span>亿</span></p>

                </li>
            </ul>
            </div>
            <button @click="buyTicket">立即购票</button>

        </div>
    </div>
    <div class="bottom"></div>
</div>
</template>

<script setup>
import {defineProps} from 'vue'
const props = defineProps({  
    movie: {  
        type: Object,  
        required: true  
    },  
    buyTicket: {  
        type: Function,  
        required: true  
    }  
});
const buyTicket = ()=>{
    props.buyTicket()
}  
</script>

<style scoped>
.bg-img{
    position: relative;
    margin-top: 80px;
    width: 100%;
    height: 260px;
    background: url("/img/banner_bg.f7fd103e3b8c16b6f449cce43fc57f45.png");
}
.bg-img>div:nth-child(1){
    width: 940px;
    margin: 0 auto;
    display: flex;
    /*border: 1px solid;*/
    justify-content: space-between;
    position: absolute;
    top: 50px;
    left: 204px;
}
.left{
    display: flex;
}
.left>a>img{
    margin-right: 30px;
    border: 2px solid white;
}
h1>a{
    color: white;
    font-size: 18px;

}
h1{
    padding-top: 20px;
}
.left>div>p{
    color: white;
    font-size: 12px;
    line-height: 20px;
}
.left>div>p:nth-child(3){
    padding-top: 5px;
}
.left>div>button{
    margin-top: 20px;
    width: 120px;
    margin-right: 10px;
    background: #76628a;
    border:none;
    color: white;
    padding: 7px 20px;
}
.left>div>button>img{
    margin-right: 7px;
    vertical-align: bottom;
}
/*�ұ�*/
.right>div{
    display: flex;
    justify-content: center;
}
.right>div>ul{
    border: 1px solid #59526e;
    background: #2f2849;
    padding: 20px 5px 10px;
    position: relative;
}
.right>div>ul:not(:nth-child(1)){
    margin-left: 7px;
}
.right>div>ul>li>p:nth-child(1){
    color: white;
    background: #ef4339;
    text-align: center;
    font-size: 12px;
    padding: 2px;
    position: absolute;
    top: -5px;
    left: 19px;
}
.right>div>ul:nth-child(2)>li>p:nth-child(1){
    position: absolute;
    top: -5px;
    left: 15px;
}
.right>div>ul:nth-child(3)>li>p:nth-child(1){
    position: absolute;
    top: -5px;
    left: 14px;
}
.right>div>ul:not(:nth-child(3))>li>p:nth-child(2){
    color: #e4c602;
    font-size: 18px;
    font-weight: 600;
    text-align: center;
}
.right>div>ul>li>p:nth-child(3){
    color: #d1cfd7;
    font-size: 12px;
}
.right>div>ul>li>p>span{
    font-size: 12px;
    color: #d1cfd7;
}
.txt-c{
    color: white;
    text-align: center;
    padding: 7px 5px 0;
}
.right>button{
    width: 100%;
    margin-top:20px ;
    padding: 7px 0;
    background: #df2e2e;
    border: none;
    color: white;
}
.bottom{
    width:1000px ;
    height: 50px;
    background: white;
    border-top: 1px solid #eaeaea;
    border-right: 1px solid #eaeaea;
    border-left: 1px solid #eaeaea;
    position: absolute;
    top: 242px;
    left: 174px;
    z-index: 1;
}
.top{
    z-index: 2;
    align-items: center
}
.left>a>img:hover{
    box-shadow: 4px 6px 20px #302a4a;
    border: 2px solid  #df2e2e;
}
.left>div>h1>a:hover{
    color:#df2e2e ;
    text-shadow:4px 6px 20px #302a4a;
}
</style>